<template>
  <div v-loading="loading" class="dashboard-container">

    <panel-group :rows="rows" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart />
    </el-row>

    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart :rows="hots" name="数量" title="热点接口统计" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart :rows="handlers" name="时长" title="接口处理时长统计" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { hotsApi, number, handlerTime } from '@/api/home'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import BarChart from './components/BarChart'

export default {
  name: 'Home',
  components: { PanelGroup, LineChart, BarChart },
  data() {
    return {
      // 数量统计对象
      rows: {
        ipNumber: 0,
        loginNumber: 0,
        onlineNumber: 0,
        operationNumber: 0
      },
      // 热点统计对象
      hots: {},
      // 接口处理时长对象
      handlers: {},
      // 加载开关
      loading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化
    async init() {
      this.loading = true
      await this.getNumber()
      await this.getHotsApi()
      await this.getHandlerTime()
      this.loading = false
    },
    // 获取首页数量统计
    getNumber() {
      return new Promise((resolve, reject) => {
        number().then(res => {
          this.rows = res.data
          resolve()
        }).catch(() => {
          this.loading = false
          reject()
        })
      })
    },
    // 获取热点接口统计
    getHotsApi() {
      return new Promise((resolve, reject) => {
        hotsApi().then(res => {
          this.hots = res.data
          resolve()
        }).catch(() => {
          this.loading = false
          reject()
        })
      })
    },
    // 获取接口处理时长统计
    getHandlerTime() {
      return new Promise((resolve, reject) => {
        handlerTime().then(res => {
          this.handlers = res.data
          resolve()
        }).catch(() => {
          this.loading = false
          reject()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container {
  height: 100%;
  background-color: #f7f5f5;
  overflow: hidden;
  padding: 25px 30px 0 30px;
  margin-top: -20px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}</style>
